* {
    margin: 0;
    padding: 0;
}

@media screen and (max-width:750px) {
    html {
        font-size: 13.33vw;
    }
}

@media screen and (min-width:750px) {
    html {
        font-size: 100px;
    }
}


/* 总体布局 */

.total {
    width: 7.5rem;
    height: 21.15rem;
    margin: 0 auto;
    box-shadow: darkgray 0 0 .05rem;
    /* background-color: aqua; */
}


/* 头部 */

.header {
    width: 7.5rem;
    height: 1.76rem;
    background-color: #fff;
}

.header_top {
    width: 6.77rem;
    height: .24rem;
    padding-top: .32rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: centent;
    align-items: center;
    margin: 0 auto;
}

.header_top img {
    width: 6.77rem;
    height: .24rem;
}

.header_bottom {
    width: 6.77rem;
    height: .62rem;
    margin: 0 auto;
    margin-top: .46rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    /* background-color: pink; */
}

.header_bottom1 {
    height: .3rem;
    width: 1.2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.header_bottom1 img {
    height: .3rem;
    width: .2rem;
}

.header_bottom2 {
    width: 1.44rem;
    height: 0.38rem;
    font-size: .34rem;
    font-weight: 600;
    text-align: center;
    color: #323038;
}

.header_bottom3 {
    position: relative;
    width: 1.74rem;
    height: .62rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.header_bottom3>img {
    width: 1.74rem;
    height: .62rem;
}

.header_bottom30 {
    position: absolute;
    left: 0;
    /* background-color: coral; */
    width: 1.74rem;
    height: .62rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.header_bottom31 {
    width: .86rem;
    height: .62rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.header_bottom31 img {
    width: .4rem;
    height: .12rem;
}

.header_bottom32 {
    width: .04rem;
    height: .38rem;
    display: flex;
    flex-flow: row nowrap;
}

.header_bottom32 img {
    width: .02rem;
    height: .38rem;
    background-color: #E0E0E0;
}

.header_bottom33 {
    width: .86rem;
    height: .62rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.header_bottom33 img {
    width: .32rem;
    height: .32rem;
}


/* 中间内容 */

.content {
    width: 7.5rem;
    height: 19.39rem;
    overflow: hidden;
    background-color: #F9FBFC;
}

.content_top {
    width: 7.34rem;
    height: 3.34rem;
    margin: 0 auto;
}

.content_top img {
    width: 7.34rem;
    height: 3.34rem;
}


/* nav栏 */

.content_nav {
    height: 3rem;
    width: 7.5rem;
    /* background-color: pink; */
}

.content_nav_11 {
    height: .5rem;
    width: 6.96rem;
    font-size: .32rem;
    margin-left: .54rem;
    color: #2B2E46;
    /* background-color: blue; */
}

.content_nav_12 {
    width: 9rem;
    height: 1.31rem;
    margin-top: .4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    /* background-color: chartreuse; */
}

.content_nav_121 {
    width: 2.98rem;
    height: 1.31rem;
    margin-left: .4rem;
    background: #5671FF;
    border-radius: .16rem .4rem .16rem .16rem;
}

.content_nav_121_1 {
    width: 2.2rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .3rem;
}

.content_nav_121_1 div {
    width: 1.26rem;
    height: .31rem;
    font-size: .31rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .31rem;
}

.content_nav_121_1 p {
    width: 1.8rem;
    height: .23rem;
    font-size: .22rem;
    font-family: SanFranciscoDisplay;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .23rem;
    opacity: 0.3;
}

.content_nav_122 {
    width: 2.98rem;
    height: 1.31rem;
    margin-left: .24rem;
    background: #FFB142;
    border-radius: .16rem .4rem .16rem .16rem;
}

.content_nav_122_1 {
    width: 2.2rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .3rem;
}

.content_nav_122_1 div {
    width: 1.26rem;
    height: .31rem;
    font-size: .31rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .31rem;
}

.content_nav_122_1 p {
    width: 2.3rem;
    height: .23rem;
    font-size: .22rem;
    font-family: SanFranciscoDisplay;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .23rem;
    opacity: 0.3;
}

.content_nav_123 {
    width: 2.98rem;
    height: 1.31rem;
    margin-left: .24rem;
    background: #47CA8E;
    border-radius: .16rem .4rem .16rem .16rem;
}

.content_nav_123_1 {
    width: 2.2rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .3rem;
}

.content_nav_123_1 div {
    width: 1.26rem;
    height: .31rem;
    font-size: .31rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .31rem;
}

.content_nav_123_1 p {
    width: 1.8rem;
    height: .23rem;
    font-size: .22rem;
    font-family: SanFranciscoDisplay;
    font-weight: 600;
    color: #FFFFFF;
    line-height: .23rem;
    opacity: 0.3;
}

.content_nav_2 {
    height: 10rem;
    width: 6.7rem;
    margin: 0 auto;
    margin-top: .7rem;
    /* background-color: aqua; */
}

.content_nav_21 {
    height: .5rem;
    width: 6.96rem;
    font-size: .32rem;
    color: #2B2E46;
}

.content_nav_22 {
    height: 9.5rem;
    width: 6.7rem;
    display: flex;
    flex-flow: row wrap;
    /* background-color: beige; */
}

.content_nav_22_1 {
    width: 3.234rem;
    height: 4.451rem;
    margin-top: .2rem;
    border-radius: .2rem;
    background-color: #fff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_1 img {
    width: 2.75rem;
    height: 1.835rem;
    border-radius: .2rem;
    margin-top: .24rem;
}

.content_nav_22_1 p {
    width: 2.6rem;
    height: .6rem;
    font-size: .28rem;
    margin-top: .25rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .3rem;
    opacity: 0.9;
}

.content_nav_22_11 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: chartreuse; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_11 img {
    margin-top: 0;
    width: .32rem;
    height: .32rem;
}

.content_nav_22_11 p {
    margin-top: 0;
    margin-left: .15rem;
    width: .85rem;
    height: .24rem;
    font-size: .23rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .24rem;
    opacity: 0.8;
}

.content_nav_22_12 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: coral; */
}

.content_nav_22_12 img {
    margin-top: 0;
    width: .2rem;
    height: .2rem;
}

.content_nav_22_12 p {
    margin-top: 0;
    width: 1.22rem;
    margin-left: .1rem;
    height: .25rem;
    font-size: .2rem;
    font-family: DINAlternate;
    font-weight: bold;
    color: #2A2A36;
    line-height: .25rem;
    opacity: 0.3;
}


/* 2 */

.content_nav_22_2 {
    width: 3.234rem;
    height: 4.451rem;
    margin-left: .23rem;
    margin-top: .2rem;
    border-radius: .2rem;
    background-color: #fff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_2 img {
    width: 2.75rem;
    height: 1.835rem;
    border-radius: .2rem;
    margin-top: .24rem;
}

.content_nav_22_2 p {
    width: 2.6rem;
    height: .6rem;
    font-size: .28rem;
    margin-top: .25rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .3rem;
    opacity: 0.9;
}

.content_nav_22_21 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: chartreuse; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_21 img {
    margin-top: 0;
    width: .32rem;
    height: .32rem;
}

.content_nav_22_21 p {
    margin-top: 0;
    margin-left: .15rem;
    width: .85rem;
    height: .24rem;
    font-size: .23rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .24rem;
    opacity: 0.8;
}

.content_nav_22_22 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: coral; */
}

.content_nav_22_22 img {
    margin-top: 0;
    width: .2rem;
    height: .2rem;
}

.content_nav_22_22 p {
    margin-top: 0;
    width: 1.22rem;
    margin-left: .1rem;
    height: .25rem;
    font-size: .2rem;
    font-family: DINAlternate;
    font-weight: bold;
    color: #2A2A36;
    line-height: .25rem;
    opacity: 0.3;
}


/* 3 */

.content_nav_22_3 {
    width: 3.234rem;
    height: 4.451rem;
    border-radius: .2rem;
    background-color: #fff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_3 img {
    width: 2.75rem;
    height: 1.835rem;
    border-radius: .2rem;
    margin-top: .24rem;
}

.content_nav_22_3 p {
    width: 2.6rem;
    height: .6rem;
    font-size: .28rem;
    margin-top: .25rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .3rem;
    opacity: 0.9;
}

.content_nav_22_31 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: chartreuse; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_31 img {
    margin-top: 0;
    width: .32rem;
    height: .32rem;
}

.content_nav_22_31 p {
    margin-top: 0;
    margin-left: .15rem;
    width: .85rem;
    height: .24rem;
    font-size: .23rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .24rem;
    opacity: 0.8;
}

.content_nav_22_32 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: coral; */
}

.content_nav_22_32 img {
    margin-top: 0;
    width: .2rem;
    height: .2rem;
}

.content_nav_22_32 p {
    margin-top: 0;
    width: 1.22rem;
    margin-left: .1rem;
    height: .25rem;
    font-size: .2rem;
    font-family: DINAlternate;
    font-weight: bold;
    color: #2A2A36;
    line-height: .25rem;
    opacity: 0.3;
}


/* 4 */

.content_nav_22_4 {
    width: 3.234rem;
    height: 4.451rem;
    margin-left: .23rem;
    border-radius: .2rem;
    background-color: #fff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_4 img {
    width: 2.75rem;
    height: 1.835rem;
    border-radius: .2rem;
    margin-top: .24rem;
}

.content_nav_22_4 p {
    width: 2.6rem;
    height: .6rem;
    font-size: .28rem;
    margin-top: .25rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .3rem;
    opacity: 0.9;
}

.content_nav_22_41 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: chartreuse; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.content_nav_22_41 img {
    margin-top: 0;
    width: .32rem;
    height: .32rem;
}

.content_nav_22_41 p {
    margin-top: 0;
    margin-left: .15rem;
    width: .85rem;
    height: .24rem;
    font-size: .23rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: #2A2A36;
    line-height: .24rem;
    opacity: 0.8;
}

.content_nav_22_42 {
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: -.7rem;
    margin-top: .3rem;
    /* background-color: coral; */
}

.content_nav_22_42 img {
    margin-top: 0;
    width: .2rem;
    height: .2rem;
}

.content_nav_22_42 p {
    margin-top: 0;
    width: 1.22rem;
    margin-left: .1rem;
    height: .25rem;
    font-size: .2rem;
    font-family: DINAlternate;
    font-weight: bold;
    color: #2A2A36;
    line-height: .25rem;
    opacity: 0.3;
}


/* 底部内容 */

.footer {
    position: fixed;
    bottom: -.1rem;
    width: 7.5rem;
    height: 1.66rem;
    border-radius: 60px 60px 0px 0px;
    background: #fff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.footer_1 {
    flex: 1;
    /* height: .73rem;
    width: .39rem; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.footer_1 img {
    width: .39rem;
    height: .425rem;
}

.footer_1>p {
    width: .4rem;
    height: .25rem;
    margin-top: .15rem;
    font-size: .15rem;
    color: #2A2A36;
    opacity: .3;
}

.footer_2 {
    flex: 1;
    /* height: .73rem;
    width: .39rem; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.footer_2 img {
    width: .39rem;
    height: .425rem;
}

.footer_2>p {
    width: .4rem;
    height: .25rem;
    margin-top: .15rem;
    font-size: .18rem;
    color: #2A2A36;
}

.footer_3 {
    flex: 1;
    /* height: .73rem;
    width: .39rem; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.footer_3 img {
    width: .39rem;
    height: .425rem;
}

.footer_3>p {
    width: .4rem;
    height: .25rem;
    margin-top: .15rem;
    font-size: .18rem;
    color: #2A2A36;
    opacity: .3;
}